<template>

  <el-button type="primary">蓝色按钮</el-button>
  <el-button icon="User">图标</el-button>
  <el-switch inline-prompt v-model="currentTheme" @change="toggleTheme"/>
  <el-button type="warning" @click="remove">删除</el-button>
  <button @click="get01">GET - 后台无参数-简单查询</button>
  <button @click="get02">GET - 后台无参数-分页</button>
  <button @click="get03">GET - 后台有参数-查询单条</button>
  <button @click="get04">Post - 后台有参数-插入单条</button>
  <button @click="get05">Delete - 后台有参数-批量删除</button>
  <button @click="get06">GET - 后台无参数-简单查询getResponseData</button>
  <button @click="testInsert">测试插入</button>
  <button @click="testSelect">测试查询</button>
  <button @click="testPage">测试分页</button>
  <button @click="testSimpleList">测试简单列表</button>
  <button @click="testUpdate">测试更新</button>
  <button @click="testDelete">测试删除</button>
  <button @click="testDeleteBatch">测试批量删除</button>
  <hr>
  <div id="main" class="main"></div>
  <div id="mainA" class="main"></div>
  <div id="mainB" class="main"></div>
  <div id="mainC" class="main"></div>
  <div id="mainD" class="main"></div>

  <div class="player">
    <MyPlayer
        poster="https://www.xdgame.com/uploads/allimg/240419/1713494315496931.jpg"
        url="https://media.st.dl.eccdnx.com/steam/apps/256919374/movie480_vp9.webm"/>
  </div>

</template>

<script setup>

import {shallowRef} from "vue";
import {elConfirm} from "../util/element.js";
import {useDark, useToggle} from "@vueuse/core";

import MyPlayer from "./MyPlayer.vue";

// 根据localStorage判断，当前是否正在使用暗黑模式
const currentTheme = shallowRef(localStorage.getItem('vueuse-color-scheme') === 'auto');

// 切换暗黑模式和默认模式
const toggleTheme = useToggle(useDark());

function remove() {
  elConfirm('确认删除吗？')
      .then(result => {
        console.log(result);
      })
      .catch(error => {
        console.log(error);
      });
}

import { onMounted } from "vue";
import * as echarts from 'echarts';
import {bar, line, pie, point} from "../util/echart.js";

// 西瓜播放器：核心实例，核心CSS，弹幕插件，弹幕CSS
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import Barrage from 'xgplayer/es/plugins/danmu';
import 'xgplayer/es/plugins/danmu/index.css';

let player = null;

onMounted(() => {
  // 基于准备好的 DOM，初始化 ECharts 实例
  let myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
  let option = {
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    legend: { data: ['销量'] },
    xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
    yAxis: {},
    series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
  };

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);


  pie({
    dom: document.getElementById('mainA'),
    data: [
      { name: '直接访问', value: 335 },
      { name: '邮件营销', value: 310 },
      { name: '联盟广告', value: 234 },
      { name: '视频广告', value: 135 },
      { name: '搜索引擎', value: 1548 }
    ],
    name: '访问来源',
    unit: '个'
  });

  bar({
    dom: document.getElementById('mainB'),
    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    yData: [5, 20, 36, 10, 10, 20],
    xName: '商品',
    yName: '销量',
    name: '销量数据',
    barWidth: '50%',
    markMax: true,
    markMin: true,
    markAvg: true,
    labelShow: true,
    labelRotate: 60
  });

  line({
    dom: document.getElementById('mainC'),
    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    yData: [5, 20, 36, 10, 10, 20],
    xName: '商品',
    yName: '销量',
    name: '销量数据',
    barWidth: '50%',
    markMax: true,
    markMin: true,
    markAvg: true,
    labelShow: true,
    labelRotate: 60
  });

  point({
    dom: document.getElementById('mainD'),
    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    yData: [5, 20, 36, 10, 10, 20],
    xName: '商品',
    yName: '销量',
    name: '销量数据',
    barWidth: '50%',
    markMax: true,
    markMin: true,
    markAvg: true,
    labelShow: true,
    labelRotate: 60
  });
});

import axios from "axios";

// 后台无参数
function get01() {
  let url = 'http://localhost:5100/user-server/api/v1/user/simpleList';
  axios.get(url).then(res => {
    console.log(res);
  }).catch(err => console.error(err));
}

// 后台无参数
function get02() {
  let url = 'http://localhost:5100/user-server/api/v1/user/page';
  let config = {params: {pageNum: 1, pageSize: 6}};
  axios.get(url, config).then(res => {
    console.log(res);
  }).catch(err => console.error(err));
}

// 后台有参数
function get03() {
  let url = 'http://localhost:5100/user-server/api/v1/user/select/1';
  axios.get(url).then(res => {
    console.log(res);
  }).catch(err => console.error(err));
}


// 后台有参数
function get04() {
  let url = 'http://localhost:5100/user-server/api/v1/user/insert';
  let params = {
    username: 'username', // 这里应该是变量或从某处获取的实际值
    password: 'password', // 同上
    realname: '真实姓名',
    idcard: '350521197512296556',
    phone: '18524661381',
    email: '18524661381@qq.com',
    info: 'info'
  };
  axios.post(url, params).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  });
}

import qs from "qs";

// 后台有参数
function get05() {
  let url = 'http://localhost:5100/user-server/api/v1/user/deleteBatch';
  // comma: 使用逗号分割不使用中括号分割
  let param = '?' + qs.stringify({ ids: [88, 89, 90] }, { arrayFormat: 'comma' });
  let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
  axios.delete(url + param, config).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  });
}

import {apiPrefixFormat, orderPayTypeFormat, orderStateFormat, seckillStatusFormat} from "../util/project.js";

console.log("----apiPrefixFormat----")
console.log(apiPrefixFormat('user'))
console.log(apiPrefixFormat('order'))
console.log(apiPrefixFormat('menu'))
console.log(apiPrefixFormat('episode'))
console.log(apiPrefixFormat('order'))


import {genderFormat} from "../util/project.js";
import {getResponseData} from "../util/request.js";


console.log("----genderFormat----")
console.log(genderFormat(1))
console.log(genderFormat(0))
console.log(genderFormat(2))

console.log("----seckillStatusFormat----")
console.log(seckillStatusFormat(0))
console.log(seckillStatusFormat(1))
console.log(seckillStatusFormat(2))

console.log("----orderStateFormat----")
console.log(orderStateFormat(0))
console.log(orderStateFormat(1))
console.log(orderStateFormat(2))
console.log(orderStateFormat(3))

console.log("----orderPayTypeFormat----")
console.log(orderPayTypeFormat(0))
console.log(orderPayTypeFormat(1))
console.log(orderPayTypeFormat(2))
console.log(orderPayTypeFormat(3))
console.log(orderPayTypeFormat(4))


// 后台无参数
function get06() {
  let url = 'http://localhost:5100/user-server/api/v1/user/simpleList';
  axios.get(url).then(res => {
    console.log(getResponseData(res));
  }).catch(err => console.error(err));
}

import {deleteApi, deleteBatchApi, insertApi, pageApi, selectApi, simpleListApi, updateApi} from "../api/axios.js";
console.log("------selectApi-------")
selectApi(1, {'module': 'user'}).then(res => {
  console.log(res)
})

const testInsert = () => {
  const params = {
    username: 'testUser',
    password: 'testPassword',
    realname: '姜琴琴',
    idcard: '61272819900507182X',
    phone: '18524661382',
    email: '18524661382@qq.com',
    info: '测试信息'
  };
  insertApi(params, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testSelect = () => {
  selectApi(1, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testPage = () => {
  const params = {
    pageNum: 1,
    pageSize: 6
  };
  pageApi(params, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testSimpleList = () => {
  simpleListApi({}, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testUpdate = () => {
  const params = {
    id: 6,
    username: 'updatedUser',
    password: 'updatedPassword',
    realname: '杨曲箭',
    idcard: '640102199001290010',
    phone: '18524661389',
    email: '18524661389@qq.com',
    info: '更新后的信息'
  };
  updateApi(params, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testDelete = () => {
  const id = 1;
  deleteApi(id, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

const testDeleteBatch = () => {
  const ids = '1,2,3';
  deleteBatchApi(ids, { 'module': 'user' }).then(res => {
    console.log(res);
  }).catch(err => {
    console.error(err);
  });
};

</script>

<style scoped lang="scss">

.main {
  width: 600px; // 宽度
  height: 400px; // 高度
  display: inline-block; // 使容器成为内联块
  vertical-align: top; // 顶部对齐
  > div {
    display: inline-block; // 子元素也作为内联块
    width: 45%; // 每个图表占据45%的宽度
    margin: 10px; // 增加外边距以提供间距
  }
}
.player {
  width: 800px; // 宽度
  height: 400px; // 高度
  margin: 20px auto; // 居中
}


</style>